<template>
	<view>
		<u-toast ref="uToast"></u-toast>
		<!-- 步骤条 -->
		<view style="padding-top: 20px;">
			<u-steps :current="current">
				<u-steps-item title="验证用户名"></u-steps-item>
				<u-steps-item title="获取验证码"></u-steps-item>
				<u-steps-item title="密码重置"></u-steps-item>
			</u-steps>
		</view>
		<!-- 步骤一 -->
		<view class="view" v-show="oneshow">
			<u-form labelPosition="left">
				<u-form-item label="用户名" labelWidth="55" borderBottom>
					<u-input border="none" type="text" v-model="username" maxlength="14" placeholder="请输入用户名">
					</u-input>
				</u-form-item>
			</u-form>
			<u-button type="primary" text="下一步" customStyle="margin-top: 30px" @click="one">
			</u-button>
		</view>
		<!-- 步骤二 -->
		<view class="view" v-show="twoshow">
			<u-form labelPosition="left">
				<u-form-item label="手机号" labelWidth="55" borderBottom>
					<u-input border="none" type="number" disabled v-model="phone" maxlength="11" placeholder="请输入手机号">
						<template slot="suffix">
							<u-tag :text="text" size="medium" type="primary" @click="getcode">
							</u-tag>
						</template>
					</u-input>
				</u-form-item>
			</u-form>
			<view class="list-code">
				<u-code-input v-model="code" maxlength="4" space='15'></u-code-input>
			</view>
			<u-button type="primary" text="下一步" customStyle="margin-top: 30px" @click="two">
			</u-button>
		</view>
		<!-- 步骤三 -->
		<view class="view" v-show="threeshow">
			<u-form labelPosition="left">
				<u-form-item borderBottom>
					<u--input border="none" prefixIcon="lock" prefixIconStyle="font-size: 22px;color: #909399"
						v-model="newpassword" type="password" clearable placeholder="请输入新密码">
					</u--input>
				</u-form-item>
				<u-form-item borderBottom>
					<u--input border="none" prefixIcon="lock-fill" prefixIconStyle="font-size: 22px;color: #909399"
						v-model="againpassword" type="password" clearable placeholder="请再一次输入新密码">
					</u--input>
				</u-form-item>
			</u-form>
			<u-button type="primary" text="确定" customStyle="margin-top: 30px" @click="three">
			</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0, //当前步骤
				username: '', //用户名
				userid: '', //用户编号
				phone: '',
				code: '',
				text: '获取验证码',
				time: 60,
				timer: '',
				newpassword: '', //新密码
				againpassword: '', //再一次输入密码
				oneshow: true,
				twoshow: false,
				threeshow: false,
			}
		},
		methods: {
			//第一步,验证用户名
			one() {
				if (!this.username) {
					this.$utils.showToast(this, '请输入用户名！', 'warning');
					return;
				}
				if (this.username !== '') {
					var ruler = /^[A-Za-z0-9]+$/;
					if (!ruler.test(this.username)) {
						this.$utils.showToast(this, '用户名由字母和数字组成！', 'warning');
						return;
					}
				}
				if (this.username.length < 4) {
					this.$utils.showToast(this, '用户名最少4位！', 'warning');
					return;
				}
				uni.showLoading({
					title: "验证中...",
					mask: true,
				});
				uni.request({
					url: getApp().globalData.serverAddress + this.$uri.Uri_inquirephone.replace(
						"{userName}", this.username),
					method: "GET",
					success: (res) => {
						if (res.statusCode !== 200) {
							this.$utils.showToast(this, '服务器错误,请联系技术支持人员!', 'error');
							return
						}
						if (res.data.code == 0) {
							if (res.data.data == '') {
								this.$utils.showToast(this, '该用户不存在或者未绑定手机！', 'error');
								this.username = '';
							} else {
								this.$utils.showToast(this, '验证成功！', 'success');
								this.phone = res.data.data;
								this.current = 1;
								this.oneshow = false;
								this.twoshow = true;
							}
						} else {
							this.$utils.showToast(this, res.data.msg, 'error');
						}
					},
					fail() {
						this.$utils.showToast(this, "验证失败！", 'error');
					},
					complete() {
						uni.hideLoading();
					}
				})
			},
			//获取验证码
			getcode() {
				if (this.timer !== '') {
					this.$utils.showToast(this, '验证码已发送！', 'warning');
					return;
				} else {
					var code = {
						phoneNumber: this.phone,
					}
					uni.showLoading({
						title: "发送中...",
						mask: true,
					});
					uni.request({
						url: getApp().globalData.serverAddress + this.$uri.Uri_getcode,
						data: JSON.stringify(code),
						dataType: "json",
						method: "POST",
						success: (res) => {
							if (res.statusCode !== 200) {
								this.$utils.showToast(this, '服务器错误,请联系技术支持人员!', 'error');
								return
							}
							if (res.data.data.code == 0) {
								this.$utils.showToast(this, '发送成功！', 'success');
								// 开启60秒倒计时
								this.getValidStr();
								this.timer = setInterval(this.getValidStr, 1000)
							} else {
								this.$utils.showToast(this, res.data.msg, 'error');
							}
						},
						fail() {
							this.$utils.showToast(this, "发送失败！", 'error');
						},
						complete() {
							uni.hideLoading();
						}
					})
				}
			},
			//倒计时时间判断
			getValidStr() {
				if (this.time >= 0 && this.time <= 60) {
					this.time--;
					if (this.time !== 0) {
						this.text = "倒计时" + this.time + "s";
					} else {
						clearInterval(this.timer);
						this.text = "获取验证码";
						this.time = 60;
						this.timer = '';
					}
				}
			},
			//第二步,获取手机验证码以后调用密码重置接口进行验证
			two() {
				if (this.code.length !== 4) {
					this.$utils.showToast(this, '请输入四位数字验证码！', 'warning');
					return;
				}
				let phonedate = new Object();
				phonedate.phoneNumber = this.phone;
				phonedate.VerifyCode = this.code;
				uni.showLoading({
					title: "验证中...",
					mask: true,
				});
				uni.request({
					url: getApp().globalData.serverAddress + this.$uri.Uri_resetpassword,
					data: JSON.stringify(phonedate),
					dataType: "json",
					method: "POST",
					success: (res) => {
						if (res.statusCode !== 200) {
							this.$utils.showToast(this, '服务器错误,请联系技术支持人员!', 'error');
							return
						}
						if (res.data.code == 0) {
							this.$utils.showToast(this, '验证成功！', 'success');
							this.userid = res.data.data.userRealId;
							this.current = 2;
							this.twoshow = false;
							this.threeshow = true;
						} else {
							this.$utils.showToast(this, res.data.msg, 'error');
						}
					},
					fail() {
						this.$utils.showToast(this, "验证失败！", 'error');
					},
					complete() {
						uni.hideLoading();
					}
				})
			},
			//第三步,密码重置
			three() {
				if (!this.newpassword || !this.againpassword) {
					this.$utils.showToast(this, '请输入密码！', 'warning');
					return;
				}
				if (this.newpassword.length < 6 || this.againpassword.length < 6) {
					this.$utils.showToast(this, '密码最少6位！', 'warning');
					return;
				}
				if (this.newpassword !== this.againpassword) {
					this.$utils.showToast(this, '两次输入密码不一致！', 'warning');
					return;
				}
				let pwd = new Object();
				pwd.Password = this.newpassword;
				pwd.RepeatPassword = this.againpassword;
				uni.showLoading({
					title: "重置中...",
					mask: true,
				});
				uni.request({
					url: getApp().globalData.serverAddress + this.$uri.Uri_changepassword.replace(
						"{userRealId}", this.userid),
					data: JSON.stringify(pwd),
					dataType: "json",
					method: "POST",
					success: (resData) => {
						if (resData.statusCode !== 200) {
							this.$utils.showToast(this, '服务器错误,请联系技术支持人员!', 'error');
							return
						}
						if (resData.data.code == 0) {
							this.$utils.showToast(this, '密码重置成功！', 'success', 4,
								'/pages/auth/login');
						} else {
							this.$utils.showToast(this, resData.data.msg, 'error');
						}
					},
					fail: () => {
						this.$utils.showToast(this, '密码重置失败！', 'error');
					},
					complete: () => {
						uni.hideLoading();
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #ffffff !important;
	}

	.u-input {
		background-color: #ffffff !important;
	}

	.view {
		width: 90%;
		margin: 20px auto;
	}

	.list-code {
		width: 60%;
		margin: 20rpx auto;
		height: 100rpx;
	}
</style>